<template>
  <div>
    <div id="app">
      <van-pull-refresh
        v-model="isLoading"
        success-text="刷新成功"
        @refresh="onRefresh"
      >
        <div class="top">
          <!-- 搜索框 -->
          <van-search
            class="search"
            shape="round"
            background="transparent"
            v-model="value"
            placeholder="搜索"
            @focus="$router.push('/search')"
          />
          <!-- 分享 -->
          <van-icon @click="showShare = true" class="btn" name="share-o" />
          <van-share-sheet
            v-model="showShare"
            title="立即分享给好友"
            :options="options"
            @select="onSelect"
          />
          <!-- 红点 -->
          <van-icon class="btn2" name="chat-o">
            <!-- 消息 -->
            <van-badge class="badge" :content="20" />
          </van-icon>
        </div>

        <!-- 轮播图 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="index in item" :key="index.id" v-lazy="index">
            <img :src="index.imgname" alt="" />
          </van-swipe-item>
        </van-swipe>
        <!-- 4个布局 -->
        <van-grid :border="false" :column-num="4">
          <van-grid-item to="/home/clothe">
            <van-image v-lazy="NavBarImg" :src="NavBarImg[0]" />
            <span>{{ NavBarTitle[0] }}</span>
          </van-grid-item>
          <van-grid-item to="/message">
            <van-image v-lazy="NavBarImg" :src="NavBarImg[1]" />
            <span>{{ NavBarTitle[1] }}</span>
          </van-grid-item>
          <van-grid-item to="/home/petwash">
            <van-image v-lazy="NavBarImg" :src="NavBarImg[2]" />
            <span>{{ NavBarTitle[2] }}</span>
          </van-grid-item>
          <van-grid-item to="/home/nearPet">
            <van-image v-lazy="NavBarImg" :src="NavBarImg[3]" />
            <span>{{ NavBarTitle[3] }}</span>
          </van-grid-item>
        </van-grid>

        <hr />
        <!-- 养宠秘籍 -->
        <div class="allbut">
          <div id="skills">
            <div>
              <span>养宠</span>
              <span>秘籍</span>
              <span>宠物洗澡的正确打开方式是？</span>
              <i
                class="iconfont icon-xiangzuoyuanquan"
                @click="changeSkills"
                v-if="skills"
              ></i>
              <i
                class="iconfont icon-xuanzhongyuanquan"
                @click="changeSkills"
                v-else
              ></i>
            </div>
            <div v-if="!skills">
              <p>
                给萌宠们洗澡最重要的一点，就是要调好水温，最适宜的温度就是和人类温度相近，这样毛孩子们不会觉得过于冷也不会过于热...
              </p>
              <p @click="ycmj">更多秘籍 <van-icon name="arrow" /></p>
            </div>
          </div>

          <!--宠物话题  -->
          <div id="topic">
            <span></span>
            <span>宠物话题</span>
            <div @click="click" class="more">
              查看更多 <van-icon name="arrow" />
            </div>
          </div>
          <div v-for="(item, index) in stitle" :key="item.tid">
            <RouterLink :to="`/moredetail/${item.tid}`">
              <Pettopic
                :title="stitle[index].title"
                :name="stitle[index].name"
                :describe="stitle[index].describe"
              >
              </Pettopic>
            </RouterLink>
          </div>
        </div>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import Pettopic from "@/components/Pettopics.vue";

import { Toast } from "vant";
import { banner, navbar, getPT, getPetImg } from "@/api/home";
export default {
  data() {
    return {
      value: "",
      isLoading: false,
      item: [],
      item2: [],

      // 定义数组，保存宠物话题数据
      title: [],
      // 获取宠物话题的前三条数据
      stitle: [],

      // 养宠秘籍图标展示隐藏
      skills: true,

      // NavBarImg
      NavBarImg: [],
      NavBarTitle: [],

      //分享
      showShare: false,
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
      ],
    };
  },
  components: {
    Pettopic,
  },

  //下拉刷新
  methods: {
    //分享
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
    //跳转到养宠秘籍
    ycmj() {
      if (!this.$store.state.user.uname) {
        return Toast.fail("请登录");
      } else {
        return this.$router.push("/ycmj");
      }
    },
    // 养宠秘籍显示隐藏方法
    changeSkills() {
      this.skills = !this.skills;
    },
    // 跳转到不同页面
    gotoPage(item) {
      this.$router.push(item);
    },
    onRefresh() {
      setTimeout(() => {
        Toast("刷新成功");
        this.isLoading = false;
      }, 1000);
    },
    async a() {
      const data = await banner();
      this.item = data.data.message;
    },
    async b() {
      const data = await navbar();
      this.item2 = data.data.msg;
      this.item2.forEach((item) => {
        this.NavBarImg.push(item.imgname);
        this.NavBarTitle.push(item.title);
      });
    },
    // 获取宠物信息
    async getPet() {
      const data = await getPT();
      this.title = data.data.message;
      for (let i = 0; i < 3; i++) {
        this.stitle.push(this.title[i]);
      }
    },

    click() {
      if (!this.$store.state.user.uname) {
        return Toast.fail("请登录");
      } else {
        return this.$router.push("/home/more");
      }
    },
  },
  beforeMount() {
    this.a();
    this.b();
    //发起请求，拿到宠物话题数据
    this.getPet();
  },
};
</script>

<style lang="scss" scoped>
hr {
  width: 90%;
  height: 0;
  color: #f2f5fa;
  border: 1px solid;
  border-color: #f2f5fa;
}

// 搜索
.top {
  width: 328px;
  height: 32px;
  padding-top: 40px;
  display: flex;
  margin: auto;
}
.search {
  width: 240px;
  padding: 0;
}
.top .btn {
  color: #333333;
  line-height: 32px;
  padding: 0 15px;
  font-size: 30px;
}
.top .btn2 {
  color: #333333;
  position: relative;
  line-height: 32px;
  font-size: 30px;
}
.top .van-badge {
  position: absolute;
  left: 18px;
  top: -5px;
}

//背景渐变
#app {
  height: 100vh;
  width: 100%;
  background: -webkit-gradient(linear, 0% 0%, 0% 35%, from(#face23), to(#fff))
    /*颜色渐变设置*/;
}
//轮播
.van-swipe {
  width: 328px;
  height: 132px;
  border-radius: 15px;
  margin: auto;
  margin-top: 20px;
}
.van-swipe img {
  width: 328px;
  height: 132px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
// 布局整体
.lay-out {
  padding: 25px 0 0 0;
  height: 74px;
  width: 308px;
  margin: auto;
  text-align: center;
  vertical-align: middle;
}
.lay-out .text {
  font-size: 10px;
  padding: 5px 0 0 0;
}

// navbar布局
.van-grid {
  width: 90%;
  margin: 0 auto;

  .van-grid-item {
    .van-image {
      margin: auto;
      display: block;
      width: 50px;
      height: 50px;
      border-radius: 10px;
      box-shadow: 0 2px 4px 0 rgba(219, 218, 218, 0.2),
        0 6px 20px 0 rgba(226, 223, 223, 0.19);
    }
    span {
      margin-top: 5px;
      font-size: 14px;
    }
  }
}

// 养宠秘籍
#skills {
  margin-top: 10px !important;
  margin-bottom: 25px !important;
  position: relative;
  border-radius: 10px;
  width: 90%;
  margin: 0 auto;
  font-family: "黑体";
  box-shadow: 0 2px 4px 0 rgba(219, 218, 218, 0.2),
    0 6px 20px 0 rgba(226, 223, 223, 0.19);
  padding-left: 10px;
  > div {
    height: 45px;
    background: #ffffff;
  }
  > div:first-child {
    position: relative;
    line-height: 45px;
    span:nth-child(1) {
      font-size: 16px;
      font-weight: bold;
    }
    span:nth-child(2) {
      font-size: 16px;
      color: #ffcc1f;
      margin-right: 10px;
    }
    span:nth-child(3) {
      font-size: 12px;
      color: #333333;
    }
    i {
      position: absolute;
      top: 3px;
      right: 20px;
      font-size: 24px;
    }
  }

  > div:last-child {
    height: 50px;
    overflow: hidden;

    p {
      margin: 0;
      padding: 0;
      font-size: 12px;
      width: 312px;
      // text-align-last: justify;

      &:last-child {
        color: red;
        float: left;
        margin-right: 0;
        position: absolute;
        right: -247px;
        top: 78px;
      }
    }
  }
}

// 宠物秘籍
#topic {
  width: 90%;
  height: 22px;
  margin: 0 auto;
  line-height: 22%;
  font-family: "黑体";
  span:first-child {
    width: 2px;
    height: 12px;
    display: inline-block;
    background: #ffcc1f;
  }
  span:nth-child(2) {
    font-size: 18px;
    margin-left: 5px;
    color: #333333;
    // font-weight: bold;
  }

  .more {
    color: #a3a3a3;
    font-size: 14px;
    float: right;
    margin-top: -2px;

    .van-icon {
      margin-left: -2px;
    }

    &:active {
      color: #ffc812;
      // background: #ffc812;
    }
  }
}
// 宠物秘籍
.rarebook .custom-title {
  margin-right: 4px;
  vertical-align: middle;
  font-size: 18px;
  font-weight: 600;
  padding: 0 10px 0 0;
}
.custom-title span {
  color: #face23;
}

.btn3 {
  font-size: 16px;
  line-height: inherit;
}
.rarebook {
  display: flex;
  margin: auto;
  width: 328px;
  height: 34px;
  margin-top: 30px;
  box-shadow: 10px 10px 10px #fafbfc;
}

// 宠物话题
.topic {
  height: 38px;
  width: 328px;
  margin: auto;
  margin-top: 20px;
  border-left: 3px solid #face23;
}
.topic .custom-title {
  font-size: 15px;
  font-weight: 600;
}
.allbut {
  height: 280px;
  // border: 1px solid red;
  overflow: scroll;
}
</style>
